import React from 'react'
import '../../layer.css'
import {Button, Input, Grid, List, Icon} from "@hi-ui/hiui";
import {messageModal} from "../../../../common/date";
import {
    loadItemRecommendDataFirst,
    getItemRecommendData1,
    getItemRecommendData2
} from '../../action/index'

const {Row, Col} = Grid

class ItemModel extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            userId: '',
            venueId: '',
            topK: 5,
            loadingBtn1: false,
            loadingBtn2: false,
            backgroundColor: '#fa7a84',
            itemdata: [],
            itemWPRdata: []
        }
    }


    async componentDidMount() {
        loadItemRecommendDataFirst().then(res => {
            if (res.code === 200) {
                this.setState({
                    backgroundColor: '#35a55d'
                })
            }
        })
    }

    loadRecommendData1() {
        const {userId, venueId, topK} = this.state
        if (userId && venueId && topK) {
            this.setState({
                loadingBtn1: true
            })
            getItemRecommendData1({userId, venueId, topK}).then(res => {
                if (res.code === 200) {
                    this.setState({
                        itemdata: this.warapData(res.data)
                    })
                }
            }).finally((r) => {
                this.setState({
                    loadingBtn1: false
                })
            })

        } else {
            messageModal('error', '请填写相关参数')
        }

    }

    loadRecommendData2() {
        const {userId, venueId, topK} = this.state
        if (userId && venueId && topK) {
            this.setState({
                loadingBtn2: true
            })
            getItemRecommendData2({userId, venueId, topK}).then(res => {
                if (res.code === 200) {
                    this.setState({
                        itemWPRdata: this.warapData(res.data)
                    })
                }
            }).finally((r) => {
                this.setState({
                    loadingBtn2: false
                })
            })

        } else {
            messageModal('error', '请填写相关参数')
        }
    }

    warapData(res) {
        return res.map(itm => {
            return {
                title: `地点ID: ${itm.venueId}`,
                extra: [
                    `score:${itm.score.toFixed(2)}`,
                    `type:${itm.type}`,
                    `lat:${itm.lat}`,
                    `lon:${itm.lon}`,
                    `距离:${itm.distant.toFixed(2)}Km`,
                    `访问次数:${itm.frequency}`
                ]
            }
        })
    }


    render() {
        const {userId, venueId, topK} = this.state

        return (
            <div className={'recommendationbody'}>
                <div className={'algorithmparam'}>
                    <Row justify='center' gutter={true}>
                        <Col>
                            <Button type="default"
                                    style={{outline: 'none', border: 'none', opacity: 0.5}}>
                                模拟用户
                            </Button>
                            <Input placeholder="输入模拟用户ID号"
                                   type={"tel"}
                                   clearable={true}
                                   value={userId}
                                   onChange={(e, val) => {
                                       this.setState({userId: val})
                                   }}
                                   bordered={false}
                                   style={{width: 200, height: 32, margin: 'auto 10px auto 10px'}}/>
                            <Button type="default"
                                    style={{outline: 'none', border: 'none', opacity: 0.5}}>
                                模拟地名
                            </Button>
                            <Input placeholder="输入模拟地名ID"
                                   type={"tel"}
                                   clearable={true}
                                   bordered={false}
                                   value={venueId}
                                   style={{width: 150, height: 32, margin: 'auto 10px auto 10px'}}
                                   onChange={(e, val) => {
                                       this.setState({venueId: val})
                                   }}/>
                            <Button type="default"
                                    style={{outline: 'none', border: 'none', opacity: 0.5}}>
                                推荐单数
                            </Button>
                            <Input placeholder="输入推荐数量"
                                   type={"tel"}
                                   clearable={true}
                                   bordered={false}
                                   value={topK}
                                   style={{width: 150, height: 32, margin: 'auto 10px auto 10px'}}
                                   onChange={(e, val) => {
                                       this.setState({topK: val})
                                   }}/>
                        </Col>
                    </Row>
                </div>
                <div className={'usecheckin useralgorithm'}>
                    <Row>
                        <Col span={21}>
                            <Button type="primary"
                                    loading={this.state.loadingBtn1}
                                    style={{outline: 'none', border: 'none'}}
                                    onClick={() => {
                                        this.loadRecommendData1()
                                    }}>
                                推荐查询1
                            </Button>
                            <span>该部分以地点间相似度计算</span>
                        </Col>
                        <Col span={3} justify={"flex-end"}>
                            <Icon name="update" style={{color: '#8eb396', fontSize: '20px'}} onClick={() => {
                                this.setState({
                                    itemdata: []
                                })
                            }}/>
                        </Col>
                    </Row>
                    <div className={'useralgorithmdata'}>
                        <List
                            type={'card'}
                            data={this.state.itemdata}
                            key='12'
                            renderItem={dataItem => {
                                const {Item} = List
                                return <Item {...dataItem} />
                            }}
                        />
                    </div>
                </div>
                <div className={'usewpr useralgorithm'}>
                    <Row>
                        <Col span={21}>
                            <Button type="primary"
                                    loading={this.state.loadingBtn2}
                                    style={{outline: 'none', border: 'none'}}
                                    onClick={() => {
                                        this.loadRecommendData2()
                                    }}>
                                推荐查询2
                            </Button>
                            <span>该部分基于个性化PageRank随机游走增强来计算</span>
                        </Col>
                        <Col span={3} justify={"flex-end"}>
                            <Icon name="update" style={{color: '#8eb396', fontSize: '20px'}} onClick={() => {
                                this.setState({
                                    itemWPRdata: []
                                })
                            }}/>
                        </Col>
                    </Row>
                    <div className={'useralgorithmdata'}>
                        <List
                            type={'card'}
                            data={this.state.itemWPRdata}
                            key='12'
                            renderItem={dataItem => {
                                const {Item} = List
                                return <Item {...dataItem} />
                            }}
                        />
                    </div>

                </div>
                <div className={'loadUserCahce'} style={{backgroundColor: this.state.backgroundColor}}>
                </div>
            </div>
        )
    }
}

export default ItemModel
